<template>
  <div class="task-count-down-com">
    <p class="countdown-one">
      {{countdownOneMsg}}
      <span class="countdown-one-clock" v-show="countdownOne ">
        <span>{{countDown[0]}}</span>&nbsp; 分
        <span>{{countDown[1]}}</span>&nbsp; 秒
      </span>
    </p>
    <p class="countdown-two">{{countdownTwoMsg}}</p>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'TaskCountDown',
  data () {
    return {
      inuniqueId: '',
      // inuniqueId: 'hhh2',
      adId: '',
      countdownOne: false,
      countdownOneMsg: '任务倒计时：',
      countDown: [],
      money: 0,
      countdownTwoMsg: '任务奖励:',
      item: {},
      // isCountShow: false
    }
  },
  watch: {
    courseItem (newVal) {
      this.item = newVal
      this.getCountdownText(this.item)
    }
  },
  props: {
    courseItem: Object,
    pageName: String,
  },
  created () {
    
  },
  mounted () {
    let query = this.$route.query;
    if (query) {
      this.inuniqueId = query.inuniqueId;
      this.adId = query.adId
    } else {
      this.adId = sessionStorage.getItem('adIdByInfluencer')
      this.getInuniqueId()
    }
    this.getCountDownTime()
  },
  methods: {

    // 获取用户uniqueId
    getInuniqueId () {
      if (localStorage.getItem('uniqueIdByInfluencer') === null) {
        this.inuniqueId = ''
        return false
      }
      this.inuniqueId = localStorage.getItem('uniqueIdByInfluencer')
    },
    // 获取倒计时
    getCountDownTime () {
      // 显示的文字
      if (this.item && this.item.overTime !== undefined) {
        let getSplitTime = this.splitMS(this.item.overTime);
        this.countDown = getSplitTime.mins_sec;
        // this.isCountShow = true
      }
      // this.isCountShow = false
      this.getCountdownText(this.item)
    },

    // 修改任务状态接口
    modifyState (statusCode, forwardId, times) {
      this.$http.post('/flowForward/updateForwardStatusByForwardId', {
        uniqueId: this.inuniqueId,
        status: statusCode,
        adId: this.adId,
        forwardId: forwardId
      }).then(
        res => {
          let resData = res.data
          this.$emit('timeOver', times)
          this.getCountdownText(resData)
        },
        err => {
          console.log(err)
        }
      )
    },
    // 切割时分秒
    splitMS (overTime) {
      let time = overTime - Date.now();
      let newTime = Math.round(time / 1000)
      let second = newTime % 60
      let minute = Math.floor(newTime / (60)) % 60
      if (second < 10) {
        second = '0' + second
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      return {
        lessTime: time,
        mins_sec: [minute, second]
      }
    },
    getCountdownText (items) {
      // 任务奖励的金额
      switch (items.adType) {
        case 1:
          switch (items.adCategory) {
            case 1:
              // 1-领1.2元 1-朋友圈
              this.money = 1.2
              break
            case 2:
              // 1-领1.2元 2-微信群
              this.money = 1.2
              break
          }
          break
        case 2:
          switch (items.adCategory) {
            case 1:
              // 2-领0.8元 1-朋友圈
              this.money = 0.8
              break
            case 2:
              // 2-领0.8元 2-微信群
              this.money = 0.8
            // break
          }
          break
      }


      if ([undefined, 0, 3].includes(items.forwardAuditStatus)) {
        // this.countdownOne = true
        this.countdownOneMsg = '任务倒计时：'
        // 倒计时
        let time
        if (items.overTime) {
          let timer = setInterval(() => {
            // 从config.js里获取剩余时间
            let getSplitTime = this.splitMS(items.overTime);
            this.countDown = getSplitTime.mins_sec;
            if (this.countDown) {
              this.countdownOne = true
            }
            // console.log(minute + ':' + second)
            if (getSplitTime.lessTime <= 0) {
              this.countDown[0] = '00'
              this.countDown[1] = '00'
              this.modifyState(items.forwardAuditStatus, items.forwardId, getSplitTime.lessTime)
              window.clearInterval(timer)
            }
          }, 1000)
        }
        this.countdownTwoMsg = `任务奖励：${this.money}元`
        return false
      }
      if (items.forwardAuditStatus === 1) {
        this.countdownOne = false
        this.countdownOneMsg = '任务正在审核中，请耐心等待…'
        this.countdownTwoMsg = `任务奖励：${this.money}元`
        return false
      }
      if (items.forwardAuditStatus === 2) {
        this.countdownOne = false
        this.countdownOneMsg = '恭喜您：任务已经完成'
        this.countdownTwoMsg = `${this.money}元奖金已放入您的钱包`
        return false
      }
      if ([4, 5, 6].includes(items.forwardAuditStatus)) {
        this.countdownOne = false
        this.countdownOneMsg = '很遗憾：任务失败'
        this.countdownTwoMsg = items.remark
        return false
      }
    }
  },
  components: {}
}
</script>

<style scoped lang="scss">
@import '~@/assets/css/common.scss';
.task-count-down-com {
  width: 686px;
  height: 178px;
  background: rgba(255, 231, 231, 1);
  border-radius: 16px;
  box-sizing: border-box;
  padding: 32px 0;
  display: flex;
  justify-content: stretch;
  align-items: center;
  flex-direction: column;
  // margin-bottom: 24px;

  p {
    font-size: 32px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(48, 49, 51, 1);
    line-height: 48px;
    &:nth-child(2) {
      padding-top: 20px;
    }
    .countdown-one-clock {
      span {
        width: 48px;
        height: 48px;
        background: rgba(254, 37, 37, 1);
        border-radius: 8px;
        font-size: 32px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 48px;
        box-sizing: border-box;
        padding: 2px 7px;
      }
    }
  }
}
</style>
